<template>
  <div class="right">
    <div class="rightTop">
      <div>客户基本信息</div>
      <div>{{ $t('message.notes') }}：</div>
      <div><a-input v-model:value="notes" placeholder="备注" /></div>
      <div>性别</div>
      <div>
        <a-radio-group v-model:value="value" name="radioGroup">
          <a-radio value="1">男</a-radio>
          <a-radio value="2">女</a-radio>
        </a-radio-group>
      </div>
      <a-button type="primary" style="margin-left:100px">保存</a-button>
    </div>
    <div class="rightBottom">
      <div class="rightBottomTitle">
        <div>
          <img src="../assets/ask.png" style="height:32px;width:32px">
          快捷回复
        </div>
        <div>
          <img src="../assets/add.png" style="height:24px;width:24px">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';


const notes = ref('');
const value = ref('1');
</script>

<style scoped>
.right {
  height: 60%;
  width: 320px;
}

.rightTop {
  width: 100%;
  height: 227px;
  background-color: #FFF;
  border-radius: 10px;
  padding: 20px;
}

.rightTop div {
  margin-bottom: 10px;
}

.rightBottom {
  width: 100%;
  min-height: 55px;
  background-color: #FFF;
  border-radius: 10px;
  margin-top: 20px;
}

.rightBottomTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
</style>